<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/global.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/reset.css">
    <script src="./js/flexible.js"></script>
    <script src="./js/better-scroll.min.js"></script>
    <title>Document</title>
</head>

<body>
    <div class="hender">
        <span>奈商城</span>
    </div>
    <div class="sousuo">
        <img src="./images/Ellipse 1.png" class="t1">
        <input type="text" placeholder="请输入您要搜索的宝贝..">
        <img src="./images/矢量智能对象.png" class="t2">
    </div>
    <div class="bannerBox">
        <div class="bannerCon">
            <ul class="dispfx">
                <li><img src="./images/banner1.jpg" alt=""></li>
                <li><img src="./images/banner2.jpg" alt=""></li>
                <li><img src="./images/banner1.jpg" alt=""></li>
                <li><img src="./images/banner2.jpg" alt=""></li>
            </ul>
        </div>
        <div class="bannerIndicator">
            <ul class="dispfx flx-hc">
                <li class="on"></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
    <div class="fenlei">
        <ul class="dispfx flx-spb">
            <li>
                <img src="./images/菲茨.png" width=".64rem" height=".76rem">
                <div>菲茨</div>
            </li>
            <li>
                <img src="./images/克奈圃.png" width=".2533rem" height=".76rem">
                <div>克奈圃</div>
            </li>
            <li>
                <img src="./images/服装.png" width=".76rem" height=".7733rem">
                <div>服装</div>
            </li>
            <li>
                <img src="./images/其他.png" width=".5733rem" heigh=".78rem">
                <div>其他</div>
            </li>
        </ul>
    </div>
    <div class="jingxuan">
        <img src="./images/Line.png" alt="">
    </div>
    <div class="shangpin">
        <ul>
            <li>
                <div class="img img1">
                    <img src="./images/home-new.png" class="new">
                </div>
                <div class="txt">
                    莫次有机PWE活性美白洗面奶
                </div>
                <div class="jiage">
                    ￥169 <s>￥220</s>
                </div>
            </li>
            <li>
                <div class="img img2">
                    <img src="./images/home-promotion.png" class="new">
                </div>
                <div class="txt">
                    莫次有机PWE活性美白嫩肤霜
                </div>
                <div class="jiage">
                    ￥169 <s>￥220</s>
                </div>
            </li>
            <li>
                <div class="img img1">
                    <img src="./images/home-new.png" class="new">
                </div>
                <div class="txt">
                    莫次有机PWE活性美白洗面奶
                </div>
                <div class="jiage">
                    ￥169 <s>￥220</s>
                </div>
            </li>
            <li>
                <div class="img img2">
                    <img src="./images/home-promotion.png" class="new">
                </div>
                <div class="txt">
                    莫次有机PWE活性美白嫩肤霜
                </div>
                <div class="jiage">
                    ￥169 <s>￥220</s>
                </div>
            </li>
        </ul>
    </div>
    <div class="di dispfx flx-ard">
        <div>
            <img src="./images/首页-选中.png" alt="">
            <p style="color: #45B5ED;">首页</p>
        </div>
        <div>
            <img src="./images/购物车.png" alt="">
            <p>购物车</p>
        </div>
        <div>
            <img src="./images/我的.png" alt="">
            <p>我的</p>
        </div>
    </div>
</body>
<script>
    var bs = BetterScroll.createBScroll(".bannerCon", {
        // ① 开启横向滚动，禁止纵向滚动
        scrollX: true,
        scrollY: false,
        // ② 保留轮播图上，纵向的原生滚动
        eventPassthrough: true,
        // ③ 开启轮播
        slide: {
            loop: true,
            threshold: 0.1,
            speed: 400,
            listenFlick: true,
            autoplay: false,
            interval: 3000
        },
        // 设置为false,解决轮播快速切换时的闪烁问题
        momentum: false,
        // 当loop为true时，设置此项为false,可以解决拖动过快产生空白的问题
        bounce: false
    });
    bs.on('scrollEnd', () => {
        var lis = document.querySelectorAll('.bannerIndicator li');
        var page = bs.getCurrentPage().pageX;
        for (var i = 0; i < lis.length; i++) {
            lis[i].className = '';
        }
        lis[page].className = 'on';
    });
</script>

</html>